<template>
    <div class="coffee-item">
        <div class="img-container">
            <img :src="searchData.image" alt="" class="img-wrap" />
        </div>
        <div class="price">{{ searchData.price }}</div>
        <div class="chinese-name">{{ searchData.chineseName }}</div>
    </div>
</template>

<script>
export default {
    props: ["searchData"],
    data() {
        return {};
    },
};
</script>

<style scoped>
.coffee-item {
    background-color: white;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s;
}

.coffee-item.active,
.coffee-item:active {
    box-shadow: 0 4px 12px rgba(139, 69, 19, 0.5);
}

.img-container {
    width: 250px;
    height: auto;
    overflow: hidden;
    border-radius: 10px;
    background-color: #d3c0a9;
}

.img-wrap {
    width: 100%;
    height: auto;
    display: block;
}

.price,
.chinese-name {
    margin-top: 10px;
    text-align: center;
}
</style>